<template>
  <Modal
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      :title="detailsProps.title"
      :visible="detailsProps.visible"
      width="100%"
      @cancel="onClose"
  >
    <Descriptions bordered>
      <DescriptionsItem :span="3" label="主题名称">{{ detailsProps.topicDetailItem.topicName }}</DescriptionsItem>
      <DescriptionsItem :span="3" label="主题名URN">{{ detailsProps.URN }}</DescriptionsItem>
      <DescriptionsItem :span="3" label="显示名">{{ detailsProps.topicDetailItem.displayName }}</DescriptionsItem>
    </Descriptions>
    <Table :columns="detailsColumns" :dataSource="detailsProps.topicDetailItem.subscriptions.records"
           :pagination="pagination"
           bordered
           show-size-changer @change="handleTableChange">
      <template #bodyCell="{ column,record }">
        <template v-if="column.key === 'operation'">
          <a @click="onAdd(record)">请求订阅</a>
          <Divider type="vertical"/>
          <Popconfirm cancel-text="取消" ok-text="确认" title="确定要删除吗?"
                      @confirm="onDelete(record.subUrn)">
            <a>删除</a>
          </Popconfirm>
        </template>
      </template>
    </Table>
    <template #footer>
      <Space>
        <Button @click="onClose">关闭</Button>
      </Space>
    </template>
  </Modal>
</template>
<script lang="ts" setup>
import {
  Button,
  Descriptions,
  DescriptionsItem,
  Divider,
  message,
  Modal,
  Popconfirm,
  Space,
  Table,
  TableProps
} from 'ant-design-vue';
import {detailsColumns} from '/@/views/maintenance-center/message-theme/components/topic';
import {computed} from 'vue';
import {
  deleteSubscription,
  requestSubscription
} from '/@/api/maintenance-center/message-notification/messageNotification';

const detailsProps = defineProps({
  visible: Boolean,
  title: String,
  URN: String,
  topicDetailItem: {},
  size: Number,
  current: Number,
  total: Number
});
// 通知父组件修改值
const emits = defineEmits(['closeDetailsDrawer', 'updateSub'])
const onClose = () => {
  emits('closeDetailsDrawer')
};
// 分页
const pagination = computed(() => ({
  showSizeChanger: true,
  showQuickJumper: true,
  current: detailsProps.current,
  pageSize: detailsProps.size,
  total: detailsProps.total,
  pageSizeOptions: [5, 10, 20, 30, 40, 100],
  showTotal: (() => {
    return `共 ${detailsProps.total} 条`;
  })
}));
const handleTableChange: TableProps['onChange'] = (pag) => {
  pagination.value.current = pag.current;
  pagination.value.pageSize = pag.pageSize;
  emits('updateSub', pag.pageSize, pag.current)
};
// 删除
const onDelete = (subURN: string) => {
  const param = {
    subUrn: subURN
  }
  deleteSubscription(param).then(() => {
    message.success('删除订阅成功')
  }).catch((e) => {
    message.error('删除失败：' + e.response.data.msg)
  })
  emits('updateSub', pagination.value.pageSize, pagination.value.current)
}
// 请求订阅
const onAdd = (record: Recordable) => {
  const params = {
    subUrn: record.subUrn,
    endpoint: record.endpoint,
    protocol: record.protocol
  }
  requestSubscription(params).then(() => {
    message.success('请求订阅成功')
  }).catch(e => {
    message.error('请求订阅失败：' + e.response.data.msg);
  })
  emits('updateSub', pagination.value.pageSize, pagination.value.current)
}
</script>